﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>淘惠帮商城</title>
		<link rel="shortcut icon" href="${resources}/icon/favicon.ico" type="image/x-icon" />
        <link rel="icon" href="${resources}/icon/favicon.ico" type="image/x-icon" />
		<script src="${resources}/js/jquery-1.10.2.min.js"></script>
		<link href="${resources}/plugs/fontAwesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="${resources}/css/main.css" rel="stylesheet" type="text/css">
		<link href="${resources}/css/common.css" rel="stylesheet" type="text/css">
		<link href="${resources}/css/index.css" rel="stylesheet" type="text/css">
		<link href="${resources}/css/indexAfter.css" rel="stylesheet" type="text/css">
		<link href="${resources}/css/swiper.min.css" rel="stylesheet" type="text/css">
		
		<script src="${resources}/js/jquery.gritter.min.js"></script>
		<script src="${resources}/js/jquery.gritter.min.extend.js"></script>
  		<link rel="stylesheet" type="text/css"  href="${resources}/css/jquery.gritter.css"  />	
		<style>
			/*轮播*/
			.banner{ width:100%; height:446px; overflow:hidden; position:relative; margin: 10px}
			
			/*discount-area*/
			.p-firm {background-color: #fff;}
			.p-success{background-color:#fff;}
			.p-night {background-color: #fff;}
			.activity-panel {background: #fff;}
    		/*notice-area*/
    		.tab {background: #fff;padding-top: 0px;}
		   	.notice a,.tab a{color:#666;}
		    .tab p{margin: 5px 10px;font-size: 14px;color: #BDC3C7;}
		    
		    
			.service-area{background-color:#FFF;margin-top:20px;margin-bottom:20px;}
			.slogen-panel{width: 1210px;margin: 0 auto;overflow: hidden;padding: 30px 5px;border-top: 1px solid #95A5A6;}
			.slogen-panel li{float:left; overflow:hidden; width:240px;}
			.slogen-panel li img{float:left; margin-right:14px;}
			.slogen-panel li h4{ font-size: 18px;color: #34495E;padding-top: 10px;height: 35px;line-height: 20px;font-weight: bold;}
			.slogen-panel li p{ font-size: 14px;color: #95A5A6;height: 20px;}
			
			.service-panel{width: 1210px;margin: 0 auto;overflow: hidden;border-top: 1px solid #95A5A6;padding: 5px;}
			.service-ad{float:left;width:260px;}
			.service-item{float:left;}
			.cot5{width:200px;}
			.cot4{width:250px;}
			
			.service-item dt{overflow:hidden;color:#1a1a1a;padding:6px 0px;font: 400 14px/24px "microsoft yahei";}
			.service-item dd{color:#1a1a1a;font: 400 12px/24px "microsoft yahei";color:#666;}
			.service-ad-left{float:left;width:120px;background:#DDD}
			.service-ad-right{float:right;width:120px;background:#EEE}
			.service-ad-left img,.service-ad-right img{width:100%}
			.service-item a{color:#666;}
			
			
    
    		
    		.footer {border-top: 5px solid #2C3E50;padding: 20px 0 30px;text-align: center;font-size: 12px;height: 150px;color: #ECF0F1;background: #34495E;}
			.foot-panel{width: 1210px;margin: 0 auto;}
			.footer p{margin:5px 0;}
    		
		</style>

		<script>
			$(function(){
				$('.notice-title').click(function(){
					
					$('.active').removeClass('active');
					$(this).addClass('active');
					
					var name = $(this).attr('data');
					
					$('.tab').addClass('hide');
					$('.tab').removeClass('show');
					$('#'+name).removeClass('hide');
				})
			})
		</script>
	</head>

<body id="body">

<ul class="leftNav">
<c:forEach items="${floorList}" var="floor" varStatus="status">
	 <li class="list <c:if test="${status.index == 0}"> active </c:if> ">
			<a href="#floor_${status.index+1}">${status.index+1}F</a>
			<input type="hidden" name="floor" value="floor_${status.index+1}"/>
	</li>
</c:forEach>
</ul>
 

<ul class="rightNav">
	<li class="list">
		<a href="${path}/manage/cart/cartShow?marketId=3">
			<div class="img"><img src="${resources}/images/1_14.png" alt=""></div>
			<c:if test="${cartCount!=null}"><span>${cartCount}</span></c:if>
			<c:if test="${cartCount==null}"><span>0</span></c:if>
		</a>
	</li>
	<li class="list">
		<a href="#body">
			<div class="img"><i class="fa fa-chevron-up" aria-hidden="true"></i></div>
			<span>回到顶部</span>
		</a>
	</li>
</ul>

<div class="top-area">
	<div class="top-panel">	
		<c:if test="${shiroMember!=null}">
		<span>您好,</span>
		<a href="${path}/manage/myCenter/myOrder">${shiroMember.member.username}</a>
		<a href="${path}/logout">登出</a>|
		<a href="${path}/manage/cart/cartShow?marketId=3" style="color:red;font-weight:bolder">购物车</a>|
		<a href="${path}/manage/myCenter/myOrder">我的订单</a>|
		<a href="${path}/manage/myCenter/myAddress">个人中心</a>|
		</c:if>
		<c:if test="${shiroMember==null}">
		<span>您好, </span>
		<a href="${path}/login">[请登录]</a>
		<a href="${path}/reg">[免费注册]</a>|
		</c:if>
		<a href="javascript:void(0);" rel="sidebar" onclick="AddFavorite('${path}/','商城');" ><i class="fa fa-star c-warning top-start"></i>收藏我们</a>|
		<span>客服电话 400-8888888</span>
	</div>
</div>
<!--顶部 end-->
	
	<!--搜索 begin-->
	<div class="search-area">
		<div class="search-logo">
			<a href="#">
				<img src="${resources}/images/6_1.png">
			</a>
		</div>
		<form id="searchform">
		<div class="search-panel">
			<p>
				<button type="button" onclick="search()">搜索</button>
				<input id="hotsearch" placeholder="请输入关键词"  type="text">
			</p>
			<div class="search-hot-panel">
				<ul>
					<li>热门搜索：</li>
					<c:forEach items="${searchList}" var="search">
						<li><a href="${path}/commodity/goodslist?name=${search.hotsearch}">${search.hotsearch}</a></li>
					</c:forEach>
				</ul>
			</div>
		</div>
		</form>
	</div>
	<!--搜索 end-->
	
	<!--导航 bengin-->
	<div class="nav-area">
		<div class="nav-panel">
			<div class="nav-all-type">
				<a class="all-type" href="${path}/commodity/goodslist">全部商品分类</a>
			</div>
			<ul class="nav">
			<!-- 	<li class="list">火锅</li> -->
			</ul>
		</div>
	</div>
	<!--导航 end-->
	

	<!--通栏-->
	<div class="banner-area">
		<!--左导航-->
		<div class="leftMenu">
			<ul class="menuList">
				<c:forEach  var="cate" items="${categoryList}" varStatus="status">
					<li class="list">
						<span><a href="${path}/commodity/goodslist?categoryId=${cate.parent.id}">${cate.parent.name}</a>
						<i class="fa fa-chevron-right" aria-hidden="true"></i>
						</span>
						<div class="menuDetail">
							<ul class="menuListDetail">
								<c:forEach items="${cate.childList}" var="child">
									<li class="menuListDetailList"><a href="${path}/commodity/goodslist?categoryId=${child.id}">${child.name}</a></li>
								</c:forEach>
							</ul>
						</div>
					</li>
				</c:forEach>
			</ul>
			<div class="menuDetail" style="display: none;">
				<ul class="menuDetailList">
					<li class="list">123</li>
				</ul>
			</div>
		</div>

		<!--中心区域 begin-->
		<div class="middle-area">
			<!--轮播-->
			<div class="banner">
				<div class="swiper-wrapper">
				<c:forEach items="${picList}" var="pic">
					<a href="${pic.linkurl}" class="swiper-slide"><img src="${pic.picurl}" alt=""></a>
				</c:forEach>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination swiper-pagination-white"></div>
			</div>
			<!--轮播-->
		</div>
		<!--中心区域 end-->

		<!--右区 : begin-->
		<div class="right-area">
			<c:forEach items="${adList}" var="ad">
				<a href="${ad.linkurl}" class="img"><img src="${ad.picurl}" alt=""></a>
			</c:forEach>
		</div>
		<!--右区 : end-->
	</div><!-- banner-area -->
		<div id="discount-area" class="discount-area"><!-- discount-area begin -->
			<c:forEach items="${floorList}" var="floor" varStatus="status">
			<h3 id="floor_${status.index+1}">${floor.name}</h3>
				<ul  class="discount-panel">
					<c:forEach items="${floor.pcfloorList}" var="floorchild">
						<a href="${path}/commodity/info?goodsId=${ floorchild.goods.id}">
						<li class="goodsList">
							<div class="img"><img src="${floorchild.picurl}" alt=""></div>
							<p class="goodsName">${floorchild.name}</p>
							<div class="price">￥${ floorchild.goods.price}<span class="saleNum">已售${floorchild.goods.sales }</span></div>
						</li>
						</a>
					</c:forEach>
				</ul>
			</c:forEach>
		</div><!-- discount-area end -->
    <%@ include  file="../footer.jsp"%>
	<script src="${resources}/js/swiper.min.js"></script>
	<script src="${resources}/js/indexAfter.js"></script>
    <script>
    //autoplay: 3000 自动翻页
    var swiper = new Swiper('.banner', {
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        effect: 'fade',
        autoplay: 3000
    });
     
    </script>
	
	<!-- 收藏我们 -->
	<!-- chrome 不支持 -->
	<script type="text/javascript">
 		function AddFavorite(sURL, sTitle) {
            sURL = encodeURI(sURL); 
        	try{   
            	window.external.addFavorite(sURL, sTitle);   
        	}catch(e) {   
       	 		try{   
                	window.sidebar.addPanel(sTitle, sURL, "");   
        		}catch (e) {   
                	alertSuccess("加入收藏失败，请使用Ctrl+D进行添加,或手动在浏览器里进行设置.");
            	}   
        	}
        }	
	</script>
	
	<!-- 购物车 -->
	<script type="text/javascript">
	/*购物车-删除产品*/
	function delGood(num){
		$("#cartItem" + num).remove();
		delCartItem(num) ;
	}
	
  	function delCartItem(gid) {
		//showMask();
	    $.ajax({
	        url: "/shop-pc/cart/del/"+gid+"",
	        type: "post",
	        success: function(data) {
	        	if(data.code == "200"){
	        		var result = eval('(' +  data.result + ')');
	        		//修改购物车
	        		$('#cartAmount1').text(result.amount);
	        		$('#cartAmount').text(result.amount);
	        		$('#cartTotal').text(result.total);
	        		//删除购物车条目
	        		$("#cartItem"+gid).remove();
	        	}
	        	//setTimeout("hideMask()", 100);
	        },
	        cache: false,
	        error: function() {
	        	//setTimeout("hideMask()", 100);
	        }
	    });
	}
  	function search(){
  		var hot = $("#hotsearch").val();
  		window.location.href="${path}/commodity/goodslist?name="+hot;
  	}
	</script>
</body>
</html>
